<template>
  <div class="limiter">
    <div class="container-login100" style="background-image: url('/images/img-01.jpg');">
      <div class="wrap-login100 p-t-190 p-b-30">
        <div class="login100-form validate-form">
          <div class="login100-form-avatar">
            <img src="/images/avatar-01.jpg" alt="AVATAR">
          </div>

          <span class="login100-form-title p-t-20 p-b-45">Register</span>

          <div class="wrap-input100 validate-input m-b-10" data-validate="请输入手机号">
            <input class="input100" type="text" name="username" v-model="username" placeholder="手机号" autocomplete="off">
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-user"></i>
            </span>
          </div>

          <div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
            <input class="input100" type="password" name="pass" v-model="password" placeholder="密码">
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-lock"></i>
            </span>
          </div>

          <div class="wrap-input100 validate-input m-b-10" data-validate="请确认密码">
            <input class="input100" type="password" name="confirmPass" v-model="confirmPassword" placeholder="确认密码">
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-lock"></i>
            </span>
          </div>
          <div class="wrap-input100 validate-input m-b-10" data-validate="请输入邮箱">
            <input class="input100" type="email" name="email" v-model="email" placeholder="邮箱">
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-lock"></i>
            </span>
          </div>
          <!-- <div style="color: red; margin: 0 auto; font-size: 0.75rem;" v-if="flag==true">该邮箱已被注册</div> -->
          <div class="wrap-input100 validate-input m-b-10" data-validate="获取验证码" style="width: 50%;">
            <input class="input100" type="text" name="sendcode" v-model="sendcode" placeholder="验证码">
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-lock"></i>
            </span>
          </div>
          <div @click="sendCode" :disabled="count > 0"
            style="color: #a69999;width: 50%; text-align: center; line-height: 60px; background-color: #ffffff; border-radius: 10%;">
            {{ count > 0 ? `${count}秒后重试` : '发送验证码' }}</div>
          <!-- <div v-if="check == true" @click="sendCode"
            style="color: #a69999;width: 50%; text-align: center; line-height: 60px; background-color: #ffffff; border-radius: 10%;">
            {{ count }}</div> -->


          <div class="container-login100-form-btn p-t-10">
            <!-- <router-link ></router-link> -->
            <button class="login100-form-btn" @click="register">注册</button>
          </div>

          <!-- <div class="text-center w-full p-t-25 p-b-230">
            <a href="index.html#" class="txt1">忘记密码？</a>
          </div> -->

          <!-- <div class="text-center w-full">
            <a class="txt1" href="index.html#">
              立即注册
              <i class="fa fa-long-arrow-right"></i>
            </a>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onUnmounted, ref, watch } from "vue";
// 导入 Vue Router 的钩子函数，用于获取路由实例
import { useRouter } from 'vue-router'
import { POST } from '@/services/request.js'; // 导入封装好的请求工具
// 获取路由实例，用于后续页面跳转
const router = useRouter();
// 插件
import { showSuccessToast, showFailToast, Empty } from 'vant';

// 定义响应式用户名和密码
const username = ref('');
const password = ref('');
const confirmPassword = ref('');
const email = ref('')
const sendcode = ref('')
const check = ref(false)
// 存放数据
const data = ref('')

const count = ref(0);
// 定时器引用
const timer = ref(null);

// const flag = ref(false)
// 组件卸载时清除定时器，避免内存泄漏
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
});

// 绑定点击事件
const register = async () => {
  // console.log(username.value);
  // if(password.value===confirmPassword.value){

  // }
  data.value = {
    username: username.value,
    password: password.value,
    confirmPassword: confirmPassword.value,
    email: email.value,
    sendcode: sendcode.value
  }
  // console.log(data.value);
  // url的请求路径对应PHP后端的路径
  const result = await POST({
    url: '/User/register',
    params: data.value,
  })
  // console.log(result.code);
  if (result.code === 1) {
    showSuccessToast(result.msg);
    router.push('login');
  } else {
    showFailToast(result.msg);
  }
}
// 点击获取验证码
const sendCode = async () => {
  // console.log(email.value,'111');
  if (email.value == '') {
    showFailToast('邮箱不能为空');
  } else {
    // 如果正在倒计时，直接返回
    if (count.value > 0) return;
    // 发送验证码的逻辑（如调用 API）
    const sendCodeRes = await POST({
      url: '/User/sendCode',
      params: {
        email: email.value
      }
    })
    if (sendCodeRes.code) {
      showSuccessToast(sendCodeRes.msg);
      // 设置倒计时时间（秒）
      count.value = 60;
      // 启动倒计时
      timer.value = setInterval(() => {
        count.value--;
        // 倒计时结束，重置状态
        if (count.value <= 0) {
          clearInterval(timer.value);
          timer.value = null;
        }
      }, 1000);
    }else{
      showFailToast(sendCodeRes.msg);
    }

  }

  // if (!Empty(email.value)) {
  //   // 如果正在倒计时，直接返回
  //   if (count.value > 0) return;
  //   // 发送验证码的逻辑（如调用 API）

  //   // 设置倒计时时间（秒）
  //   count.value = 60;
  //   // 启动倒计时
  //   timer.value = setInterval(() => {
  //     count.value--;

  //     // 倒计时结束，重置状态
  //     if (count.value <= 0) {
  //       clearInterval(timer.value);
  //       timer.value = null;
  //     }
  //   }, 1000);
  // }else{
  //   showFailToast('邮箱不能为空');
  // }


}



</script>
